<template>
	
	<view class="tabbar">
		<view 
		class="tab" 
		v-for="(item,index) in tabbarList" 
		:key='index'
		@tap='navigateTo(item.pagePath)'
		>
			<image v-if='item.pagePath===cureentPage' :src="item.selectedIconPath" mode=""></image>
			<image v-else :src="item.iconPath" mode=""></image>
			<view class="text">{{item.text}}</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			cureentPage:{
				type:String,
				default:'index'
				
			}
		},
		data(){
			return{
				tabbarList:[
					{
						"iconPath": "/static/首页未.png",
						"selectedIconPath": "/static/首页点.png",
						"pagePath": "index",
						"text": "首页"
					},
					{
						"iconPath": "/static/发现未.png",
						"selectedIconPath": "/static/发现点.png",
						"pagePath": "finding",
						"text": "发现"
					},
					{
						"iconPath": "/static/识别未.png",
						"selectedIconPath": "/static/识别点.png",
						"pagePath": "guide",
						"text": "识别"
					},
					{
						"iconPath": "/static/商城未.png",
						"selectedIconPath": "/static/商城点.png",
						"pagePath": "shopping",
						"text": "商城"
					},
					
					{
						"iconPath": "/static/个人未.png",
						"selectedIconPath": "/static/个人点.png",
						"pagePath": "my",
						"text": "个人"
					}
				]
			}
		},
		methods:{
			navigateTo(e) {
		
			    uni.redirectTo({
			      url: `../../pages/${e}/${e}`,
				  //animationType:"fade-in",
		
				  animationDuration:0,
			    })
			  
			}

		}
		
	}
</script>

<style scoped>
	.tabbar{

		border-top: 2rpx solid #636263;
		background-color: #FFFFFF;
		z-index: 9999;
		position: sticky;
		left: 0;
		bottom: 0rpx;
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		
		 
	}
	.tab{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	image{
		width: 40rpx;
		height: 40rpx;
		
	}
	.text{
		padding: 10rpx 0;
		font-size: 24rpx;
	}
</style>